<style lang="less">
@import "../styles/common.less";
@import "./index.less";
@import "../tables/components/table.less";
</style>

<template>
  <div class="address div-relative">
    <Row class="row">
      <Col span="6" class="list-div">
        <Card>
          <p slot="title">部门</p>
          <div class="tree-div user-tree-div user-list-tree-div">
            <div class="table-head" v-show="selectionArr_dep.length == 0">
              <Button type="primary" class="Button" @click="addDep()">添加</Button>
            </div>
            <div class="table-head" v-show="selectionArr_dep.length > 0">
              <div class="left-btn">
                <Button type="error" class="Button" @click="removeDep()">删除</Button>
              </div>
              <div class="left-btn">
                <Button
                  type="warning"
                  class="Button"
                  @click="updateDep('update')"
                  :disabled="selectionArr_dep.length == 1 ? false : true"
                >修改</Button>
              </div>
              <Button type="text" class="Button" @click="hideNums()">取消</Button>
            </div>
            <Table
              stripe
              border
              :columns="columns_dep"
              :data="data_dep"
              @on-row-click="onRowData_dep"
              @on-selection-change="selectionChange_dep"
              ref="selectionTable_dep"
            ></Table>
            <div style="margin: 10px;overflow: hidden;height: 36px;">
              <div style="text-align: center;">
                <Page
                  simple
                  :total="total_dep"
                  :current="page_dep"
                  @on-change="changePage_dep"
                  show-elevator
                ></Page>
              </div>
            </div>
          </div>
        </Card>
      </Col>
      <Col span="18" class="padding-left-10 list-div">
        <Card id="TableCard">
          <p slot="title">
            <Icon type="md-people" size="24"></Icon>用户列表
            <span v-if="depTitle!=''">（ {{depTitle}} ）</span>
          </p>
          <!--人员列表-->
          <user-list
            :dep_id="dep_id"
            :get_dep_list="get_dep_list"
            @userListBackFun="userListBackFun"
          ></user-list>
        </Card>
      </Col>
    </Row>
    <!--编辑部门信息-->
    <Modal
      v-model="addDepModal"
      :closable="false"
      :mask-closable="false"
      :width="600"
      class-name="vertical-center-modal"
      class="Modal-Detail-div"
    >
      <h3 slot="header" style="color:#2D8CF0">编辑部门信息</h3>
      <Form :label-width="100" label-position="right">
        <FormItem label="部门类型">
          <Select v-model="dep.type" :transfer="true" style="width:100%;">
            <Option v-for="item in depTypeArr" :value="item.id" :key="item.id">{{ item.title }}</Option>
          </Select>
        </FormItem>
        <FormItem label="部门名称">
          <Input v-model="dep.name" placeholder="部门名称"></Input>
        </FormItem>
      </Form>
      <div slot="footer">
        <Button type="text" @click="cancelDepMobile">取消</Button>
        <Button type="primary" :loading="saveLoading" @click="saveDep">保存</Button>
      </div>
    </Modal>
    <spin-page :showSpin="showSpin"></spin-page>
  </div>
</template>

<script>
import Cookies from "js-cookie";
import Util from "../../libs/util";
import Utils from "../../libs/mod.utils";
import String from "../../libs/mod.string";
import Modal from "../../libs/mod.Modal";
import userAvatar from "../components/user-avatar.vue";
import userInfo from "../components/user-info.vue";
import userList from "./user-list.vue";
import spinPage from "../components/spin-page.vue";
export default {
  components: {
    userAvatar,
    userInfo,
    userList,
    spinPage
  },
  data() {
    return {
      TableHeight: 300,
      spanList: 18,
      total: 0,
      page: 1,
      total_dep: 0,
      page_dep: 1,
      size: 10,
      id: "",
      get_dep_list: 0, // 部门增减了 更新user组件
      depid: "",
      depTypeArr: [],
      columns_dep: [
        {
          type: "selection",
          width: 50,
          align: "center"
        },
        {
          key: "name",
          title: "名称",
          align: "center",
          render: (h, params) => {
            var name = params.row.name || "";
            var type = params.row.type || {};
            var title = type.title || "";
            if (title) {
              name = name + "（" + title + "）";
            }
            return h("div", [h("span", name)]);
          }
        }
      ],
      data_dep: [],
      selectionArr_dep: [],
      columns: [
        {
          type: "selection",
          width: 60,
          align: "center"
        },
        {
          key: "name",
          title: "姓名",
          width: 100,
          align: "center",
          sortable: "custom"
        },
        {
          key: "mobile",
          title: "电话",
          align: "center",
          sortable: "custom"
        },
        {
          key: "department_name",
          title: "部门",
          align: "center",
          sortable: "custom"
        },
        {
          key: "position",
          title: "职务",
          align: "center",
          sortable: "custom",
          render: (h, params) => {
            var position = params.row.position || {};
            var position2 = params.row.position2 || {};
            var arr = [];
            if (position && position.title) {
              arr.push(position.title);
            }
            if (position2 && position2.title) {
              arr.push(position2.title);
            }
            var str = arr.join(" ， ");
            return h("div", [h("span", str)]);
          }
        },
        {
          key: "status",
          title: "在职状态",
          width: 120,
          align: "center",
          sortable: "custom",
          render: (h, params) => {
            return h("div", [h("span", params.row.status.title)]);
          }
        }
      ],
      data: [],
      dataDetail: {},
      saveLoading: false,
      dep: {
        id: "",
        name: "",
        type: ""
      },
      addDepModal: false,
      depAjaxType: "add",
      depTitle: "",
      addCurrentTableData: false,
      ajaxType: "add",
      addData: {
        mobile: ""
      },
      selectionArr: [],
      dep_id: "",

      importDataModal: false,
      importDataArr: [],
      ImportDataColumns: [],
      ImportData: [],

      search_name: "",
      userInfo_id: "", // 查看用户详情的用户id
      showSpin: false //加载中
    };
  },
  computed: {},
  mounted() {
    var _this = this;
    _this.getDepList();
    _this.getDepTypeList();
    _this.$nextTick(function() {
      var height = $("#TableCard").height();
      var TableHeight = height - 36 - 32 - 10 - 56 - 51;
      _this.TableHeight = TableHeight;
    });
  },
  methods: {
    // 添加
    addDep: function() {
      var _this = this;
      _this.depAjaxType = "add";
      _this.dep.id = "";
      _this.dep.name = "";
      _this.dep.type = "";
      _this.addDepModal = true;
    },
    // 修改
    updateDep: function() {
      var _this = this;
      var selectionArr = _this.selectionArr_dep;
      if (selectionArr.length == 0) {
        Utils.showToast.error(_this, "请选择要修改的数据!");
        return false;
      }
      if (selectionArr.length > 1) {
        Utils.showToast.error(_this, "只能修改一条数据!");
        return false;
      }
      var dataObj = selectionArr[0];
      _this.depAjaxType = "update";
      _this.dep.id = dataObj.id;
      _this.dep.name = dataObj.name || "";
      _this.dep.type = dataObj.type ? dataObj.type.id : "";
      _this.addDepModal = true;
    },
    // 删除
    removeDep: function() {
      var _this = this;
      var selectionArr = _this.selectionArr_dep;
      if (selectionArr.length == 0) {
        Utils.showToast.error(_this, "请选择要删除的数据!");
        return false;
      }
      var selectionIds = [];
      for (var k in selectionArr) {
        if (!selectionArr[k]) {
          continue;
        }
        var id = selectionArr[k].id;
        selectionIds.push(id);
      }
      Modal.confirm(
        _this,
        { content: "确定删除选中的信息？" },
        function() {
          var data = {
            ids: selectionIds
          };
          var params = {
            url: "/department/del",
            type: Util.method.post,
            data: data,
            success: _successFun
          };
          Util.ajax(_this, params);
          function _successFun(res) {
            if (res.result == 0) {
              _this.page_dep = 1;
              _this.get_dep_list = _this.get_dep_list + 1;
              _this.getDepList();
            } else {
              Utils.showToast.error(_this, "删除信息失败!");
            }
          }
        },
        function() {}
      );
    },
    // 保存
    saveDep: function() {
      var _this = this;
      var id = _this.dep.id;
      var name = _this.dep.name;
      var type = _this.dep.type;
      if (type == "") {
        Utils.showToast.error(_this, "请选择部门类型");
        return false;
      }
      if (name == "") {
        Utils.showToast.error(_this, "请输入部门名称");
        return false;
      }
      var url = "/department/add";
      if (_this.depAjaxType == "update") {
        url = "/department/update";
      }
      var data = {
        id: id,
        type: type,
        name: name
      };
      var params = {
        url: url,
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      _this.saveLoading = true;
      function _successFun(res) {
        _this.saveLoading = false;
        if (res.result == 0) {
          _this.page_dep = 1;
          _this.get_dep_list = _this.get_dep_list + 1;
          _this.getDepList();
          _this.cancelDepMobile();
        } else {
          Utils.showToast.error(_this, "保存信息失败!");
        }
      }
    },
    // 取消编辑
    cancelDepMobile: function() {
      var _this = this;
      _this.addDepModal = false;
      _this.saveLoading = false;
    },
    // 取消
    hideNums: function() {
      var _this = this;
      _this.$refs.selectionTable_dep.selectAll(false);
      _this.selectionArr_dep = [];
      _this.saveLoading = false;
    },
    // 部门类型
    getDepTypeList: function() {
      var _this = this;
      var data = {};
      var params = {
        url: "/department/type/list",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var data = res.data || [];
          _this.depTypeArr = data;
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询部门类型失败!");
        }
      }
    },
    // 部门列表
    getDepList: function() {
      var _this = this;
      var data = {
        page: _this.page_dep,
        size: _this.size
      };
      var params = {
        url: "/department/list",
        type: Util.method.post,
        data: data,
        success: _successFun
      };
      Util.ajax(_this, params);
      function _successFun(res) {
        if (res.result == 0) {
          var data = res.data || [];
          _this.data_dep = data;
          _this.total_dep = res.rows || 0;
          _this.hideNums();
          if (data.length > 0) {
            _this.depTitle = data[0].name || "";
            _this.dep_id = data[0].id || "";
          }
        } else {
          _this.$Message.destroy();
          _this.$Message.error("查询部门信息失败!");
        }
      }
    },
    changePage_dep: function(page) {
      var _this = this;
      _this.page_dep = page;
      _this.getDepList();
    },
    onRowData_dep: function(data) {
      var _this = this;
      _this.depTitle = data.name || "";
      _this.dep_id = data.id || "";
    },
    selectionChange_dep: function(arr) {
      var _this = this;
      _this.selectionArr_dep = arr;
    },
    userListBackFun: function(id) {
      var _this = this;
      _this.page_dep = 1;
      _this.getDepList();
    }
  }
};
</script>

<style>
</style>
